<template>
  <view class="card-item">
    <view class="item-head">
      <view class="left-info">
        <view class="img-wrap flex-center" @tap="toOthers(item.id)">
          <image :src="item.avatar" mode="widthFix" class="avatar"></image>
        </view>
        <view class="square_info_box">
          <view class="head-name">{{ item.username }}</view>
          <text class="color-nine">{{ item.createTime }}</text>
        </view>

      </view>

    </view>
    <view class="content" @tap="toDetails(item.id)">
      <view style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
        <view class="text-content">{{ item.subject }}</view>
        <u-tag v-show="item.isTop===1" text="置顶" mode="dark" class="tag" type="success"></u-tag>
      </view>
      <view class="img-wrap padding-bottom-lg" v-if="item.photoList.length == 1">
        <view class="img-box">
          <image v-for="(child, idx) in item.photoList" :key="idx" :src="child" mode="widthFix" class="img"
          ></image>
        </view>
      </view>
      <view class="img-list padding-bottom-lg" v-if="item.photoList.length > 1">
        <view class="img-box" v-for="(child, idx) in item.photoList" :key="idx">
          <image :src="child" mode="widthFix" class="img">
          </image>
        </view>
      </view>
      <view class="bottom-btn padding-bottom-sm"
            style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;margin-top: 12upx;">
        <view class="btn-item flex-center"
              style="display: flex;flex-direction: row;align-items: center;margin-left: 24upx;">
          <image class="img" src="../../static/img/diary/img_say.png" mode="widthFix"
                 style="width: 45upx;height: 45upx;"></image>
          <text style="margin-left: 12upx;">{{ item.collnum }}</text>
        </view>
        <view class="btn-item flex-center" @tap.stop @tap="handleLike(item.id, item.isLike, item.likenum)"
              style="display: flex;flex-direction: row;align-items: center;margin-right: 48upx;">
          <image class="img" v-if="!item.isLike" src="../../static/img/diary/img_zan.png"
                 style="width: 45upx;height: 45upx;margin-right: 12upx;" mode="widthFix">
          </image>
          <image class="img" v-else src="../../static/img/diary/img_zan_1.png" mode="widthFix"
                 style="width: 45upx;height: 45upx;margin-right: 12upx;"></image>
          <text>{{ item.likenum }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {like_add} from '@/api/ap_content'

export default {
  props: {
    obj: {
      type: Object
    },
    radius: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      item: this.obj,
      showPop: false,
      commentList: []
    };
  },
  watch: {
    obj(val) {
      this.list = val;
    }
  },
  methods: {
    handleFollow(id) {
      let that = this;
      that.item.follow = !that.item.follow;
    },
    toDetails(id) {

      uni.navigateTo({
        url: '/pages/squareDetail/squareDetail?id=' + id
      })
    },
    handleLike(id, isLike, likeNum) {
      let that = this;
      if (that.item.isLike) {
        that.item.likenum--;
        let params = {}
        params.id = id;
        params.type = 2
        like_add(params).then(res => {
          console.log(res)
        })
      } else {
        that.item.likenum++;
        let params = {}
        params.id = id;
        params.type = 1
        like_add(params).then(res => {
          console.log(res)
        })
      }
      that.item.isLike = !that.item.isLike;


    },
    toOthers() {
      uni.navigateTo({
        url: '../../pages/mine/other'
      });
    },
    ViewImage(index, arr) {
      let list = [];
      for (let i = 0; i < arr.length; i++) {
        list.push(arr[i].url);
      }
      uni.previewImage({
        current: index,
        urls: list
      });
    }
  }
};
</script>

<style lang="less" scoped>


.card-item {
  padding: 20rpx 30rpx 10rpx;
  background-color: #ffffff;
  margin: 20upx 12upx;
  border-radius: 24upx;
  box-shadow: 0 20rpx 40rpx 0 rgba(0, 0, 0, 0.1);

  .item-head {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;

    .left-info {
      display: flex;
      align-items: center;

      .img-wrap {
        width: 80rpx;
        height: 80rpx;
        overflow: hidden;
        border-radius: 50%;

        .avatar {
          width: 100%;
          height: 80rpx;
        }
      }

      .head-name {

        color: #000000;
        font-size: 48rpx;
        font-weight: bold;
        font-family: "楷体", serif;
      }

      .color-nine {
        color: #8d8d8d;
        font-size: 24rpx;
        font-weight: bold;
        font-family: "楷体", serif;
      }
    }

    .follow-btn {
      width: 140rpx;
      height: 60rpx;
      border: 1rpx solid var(--mainColor);
      color: var(--mainColor);
      border-radius: 40rpx;
    }

    .followed {
      color: #fff;
      background: var(--activeColor);
      border: 1rpx solid var(--activeColor);
    }
  }

  .content {
    .text-content {
      padding: 40rpx 0;
      justify-content: space-between;
      color: var(--mainColor);
      font-size: 30rpx;
      text-align: justify;
    }

    .img-list {
      display: flex;
      flex-flow: row wrap;

      .img-box {
        flex: 0 0 30%;
        margin: 0 1% 1%;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        height: 200rpx;
        border-radius: 4px;
        background-color: #ececec;

        .img {
          width: 100%;
        }
      }
    }

    .img-wrap {
      .img-box {
        width: 100%;
        max-height: 400rpx;
        overflow: hidden;
        display: flex;
        align-items: center;
      }
    }
  }
}

.cont {
  --color: var(--activeColor);
  --count: 1;
}

.square_info_box {
  width: 500upx;
  height: 100upx;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: space-between;
  margin-left: 32upx;
}
</style>